<template>
  <div class="group">
    <ul class="flex flex-col gap-2" v-if="options.length > 0">
      <li
        v-for="(item, key) in options"
        :key="key"
        class="px-4 py-2 hover:bg-slate-100"
        :class="{ active: modelValue?.includes(`${item.value}`) }"
        @click="selectItem(item)"
      >
        {{ item.label }}
      </li>
    </ul>
    <a-empty v-else />
  </div>
</template>

<script setup lang="ts">
import { fetchLabelOptions } from "@/api/service/lcd-device/lcd-device";
import { LabelValue } from "@arco-design/web-vue/es/tree-select/interface";
import { ref, onMounted } from "vue";

const modelValue = defineModel<string[]>();

const emit = defineEmits(["change"]);
const options = ref<LabelValue[]>([]);

const selectItem = (item: LabelValue) => {
  const v = `${item.value}`;
  if (!modelValue.value) return;
  if (modelValue?.value.includes(v)) {
    modelValue.value = modelValue.value.filter((i) => i !== v);
  } else {
    modelValue.value.push(v);
  }
  emit("change", modelValue.value);
};
onMounted(async () => {
  if (options.value.length === 0) {
    const { data } = await fetchLabelOptions(true);
    options.value = data;
  }
});
</script>

<style lang="scss" scoped>
.active {
  background: var(--primary);
  color: white;
}
ul {
  li {
    cursor: pointer;
    border-radius: var(--radius);
  }
}
</style>
